/*
 * @Description: 短信验证码输入区域组件
 * @Author: zhenqiang.hong
 * @Date: 2019-12-05 15:32:41
 * @Last Modified by: zhenqiang.hong
 * @Last Modified time: 2019-12-23 11:32:44
 */
<template>
  <div class="flex-h flex-vc sms-wapper">
    <!-- <i
      ref="iconArea"
      class="icon iconfont icon-verification fontsize48"
    ></i> -->
    <img
      class="img-smscode"
      src="../assets/login-smscode.png"
    />
    <input
      type="tel"
      class="input-cmomon fontsize32 input-sms"
      v-model.trim="smsCode"
      @input="changeValue"
      placeholder="请输入短信验证码"
    />
    <i class="flex1"></i>
    <i
      v-if="smsCode?true:false"
      class="icon iconfont icon-cancel-o fontsize40"
      @click="clearSmsCode()"
    ></i>
    <button
      class="sms-code-btn fontsize28"
      :class="this.countDownSecond===0?'baseBgColorNoActive':'baseBgColorInvalid'"
      @click="getSmsCode()"
    >{{smsCodeBtnTxt}}</button>
    <bind-mask
      ref="myBindMask"
      @bindWechat="bindWechatClick()"
    ></bind-mask>
  </div>
</template>

<script>
import { sendSmscode, sendSmscodeRegister, sendSmscodeForget, sendSmscodeThirdlogin } from '../api/api'
import { validatePromiseAll } from '../utils/validateForm'
import BindMask from '../components/BindMask'
export default {
  components: {
    bindMask: BindMask
  },
  props: {
    value: {// 短信验证码
      type: String,
      default: ''
    },
    smscodeType: {// 发送验证码类型：1:通用验证码，2:注册验证码，3:忘记密码验证码，4:第三方登录验证码绑定手机号（微信）
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      smsCode: this.value, // 短信验证码
      smsCodeBtnTxt: '获取验证码', // 短信验证码文案
      countDownSecond: 0, // 倒计时秒数
      countDownTimer: null// 倒计时计时器
    }
  },
  watch: {
    value(val) { // 监听父组件传递数据，更新内部值
      this.smsCode = val
    }
  },
  mounted() {
    // if (sessionStorage.getItem('smsCode')) {
    //   this.smsCode = sessionStorage.getItem('smsCode')
    //   sessionStorage.removeItem('smsCode')
    // }
  },

  methods: {
    changeValue(e) {
      // 给input元素的 input 事件绑定一个方法 changeValue
      // 每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。
      this.$emit('input', e.target.value)
    },
    clearSmsCode() { // 清空输入框
      this.smsCode = ''
    },
    getSmsCode() { // 获取验证码
      if (this.countDownSecond === 0) {
        let username = this.$parent.$refs.myUsername.username

        validatePromiseAll({
          checkArray: [{
            type: 'username',
            value: username
          }],
          successCallback: (dataArray) => {
            // console.log('this.smscodeType----->', this.smscodeType)
            // 发送验证码类型(smscodeType)：1:通用验证码，2:注册验证码，3:忘记密码验证码，4:第三方登录验证码绑定手机号（微信）
            switch (this.smscodeType) {
              case 1:// 1:通用验证码
                sendSmscode(username).then(res => {
                  this.getCountDownTimer()
                })
                break
              case 2:// 2:注册验证码
                sendSmscodeRegister(username).then(res => {
                  this.getCountDownTimer()
                })
                break
              case 3:// 3:忘记密码验证码
                sendSmscodeForget(username).then(res => {
                  this.getCountDownTimer()
                })
                break
              case 4:// 4:第三方登录验证码绑定手机号
                sendSmscodeThirdlogin(username).then(res => {
                  if (res.PHONE_BIND_THIRD === 1) { // PHONE_BIND_THIRD：0.未绑定第三方帐号，1.已经绑定第三方帐号
                    this.$refs.myBindMask.show()
                  } else {
                    this.getCountDownTimer()
                  }
                })
                break
              default:
                break
            }
          },
          errorCallback: (error) => {
            console.log('表单校验失败：' + error)
            this.$toastMsg(error)
          }
        })
      }
    },
    getCountDownTimer() { // 验证码倒计时
      this.$toastMsg('验证码发送成功')
      this.countDownSecond = 120
      this.smsCodeBtnTxt = '重新发送' + this.countDownSecond + 'S'
      this.countDownTimer = setInterval(() => {
        if (this.countDownSecond > 1) {
          this.smsCodeBtnTxt = '重新发送' + (--this.countDownSecond) + 'S'
        } else {
          clearInterval(this.countDownTimer)
          this.countDownSecond = 0
          this.smsCodeBtnTxt = '获取验证码'
        }
      }, 1000)
    },
    bindWechatClick() { // 强绑确认
      let username = this.$parent.$refs.myUsername.username
      sendSmscodeThirdlogin(username, 1).then(res => {
        this.$refs.myBindMask.hide()
        this.getCountDownTimer()
      })
    }
    // getSmsCode() { // 获取验证码
    //   this.$emit('getSmsCode')
    // }
  }
}
</script>

<style scoped>
/* 输入区包裹层 */
.sms-wapper {
  width: 690px;
  height: 112px;
  margin-top: 32px;
  box-sizing: border-box;
  border-bottom: 1px solid #f2f5f6; /*no*/
}
/* 验证码图标 */
/* .icon-verification {
  color: #333;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
} */
.img-smscode {
  width: 60px;
  height: 60px;
}
/* 默认输入框样式 */
.input-cmomon {
  font-weight: 400;
  color: #333;
  /* width: calc(100%-40px); */
  height: 45px;
  line-height: 45px;
  margin: 0 26px;
  border: none;
}
.input-sms {
  min-width: 256px;
}
/* 清空图标样式 */
.icon-cancel-o {
  color: #ccc;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
/* 获取验证码按钮 */
.sms-code-btn {
  color: #fff;
  /* min-width: 180px; */
  height: 50px;
  margin-left: 20px;
  padding: 0 20px;
  border-radius: 8px;
  border: none;
  white-space: nowrap;
}
</style>
